<template>
  <div class="page">
    <v-pageTitle title="月度评分列表"></v-pageTitle>
    <!--工具条-->
    <v-pageToolbar align="left">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="考核月份">
          <el-date-picker
            size="small"
            v-model="formSearch.valueMonth"
            type="month"
            placeholder="">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="formSearch.branch" size="small" filterable placeholder="请选择">
            <el-option
              v-for="item in branchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-select size="small" v-model="formSearch.staff" filterable placeholder="请选择查询关键字">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </v-pageToolbar>
    <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="center">
        <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" :default-sort="{prop: 'sum', order: 'level'}">
            <el-table-column prop="branch" fixed="left" label="部门" width="120" sortable>
						</el-table-column>
            <el-table-column prop="staff" fixed="left" label="人员" width="100" sortable>
						</el-table-column>
            <el-table-column prop="work" label="工作量分(40%)" min-width="160" sortable>
						</el-table-column>
            <el-table-column prop="quality" label="工作品质分(30%)" min-width="170" sortable>
						</el-table-column>
            <el-table-column prop="team" label="团队协作分(18%)" min-width="170" sortable>
						</el-table-column>
            <el-table-column prop="normal" label="平时分(20%)" min-width="150" sortable>
						</el-table-column>
            <el-table-column prop="study" label="学习创新分(10%)" min-width="170" sortable>
						</el-table-column>
            <el-table-column prop="master" label="经理评分(80%)" min-width="160" sortable>
						</el-table-column>
            <el-table-column prop="attend" label="全勤(2%)" min-width="120" sortable>
						</el-table-column>
            <el-table-column fixed="right" prop="sum" label="总分" min-width="100" sortable>
						</el-table-column>
            <el-table-column fixed="right" prop="level" label="级别" min-width="100" sortable>
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.level | statusFilterType">{{scope.row.level | statusFilter}}</el-tag>
              </template>
						</el-table-column>
        </el-table>
    </v-pageTable>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        branchOptions:[
          {
            value: '选项1',
            label: '软件部'
          }, {
            value: '选项2',
            label: '新业务部'
          }, {
            value: '选项3',
            label: '市场部'
          }, {
            value: '选项4',
            label: '维修部'
          }, {
            value: '选项5',
            label: '人事部'
          }
        ],
        formSearch:{
          valueMonth: new Date(),
          branch:'',
          staff: ''
        },
        options: [
          {
            value: '选项1',
            label: '张召忠'
          }, {
            value: '选项2',
            label: '张喜'
          }, {
            value: '选项3',
            label: '陈光明'
          }, {
            value: '选项4',
            label: '许静海'
          }, {
            value: '选项5',
            label: '张家力'
          },
          {
            value: '选项6',
            label: '司琳'
          }, {
            value: '选项7',
            label: '岩栓天'
          }, {
            value: '选项8',
            label: '俗称并'
          }, {
            value: '选项9',
            label: '王盼盼'
          }, {
            value: '选项10',
            label: '王亚'
          }
        ],
        tableData: {
            loading: true,
            body: []
        },
        paginationTotal: 100,
        sels:[]
      }
    },
    filters: {
      statusFilter(level) {
        const statusMap = ['优','良','中','差']
        return statusMap[level]
      },
      statusFilterType(level) {
        const statusMapType = ['primary','success','danger','error']
        return statusMapType[level]
      }
    },
    methods: {
      onSearch(){
        console.log(formSearch)
      },
      getTableData() {
          // ajax 查询表格数据
          this.tableData.body = [
            {
              id: 1,
              branch: '新业务部',
              staff: '张宗昭',
              work: '75',
              quality: '80',
              team: '75',
              normal: '88',
              study: '85',
              master: '75',
              attend: '75',
              sum: '77',
              level: 1
            }, {
              id: 2,
              branch: '新业务部',
              staff: '许静海',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 2
            }, {
              id: 2,
              branch: '新业务部',
              staff: '张家力',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 3
            }, {
              id: 2,
              branch: '新业务部',
              staff: '司琳',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 0
            }, {
              id: 2,
              branch: '新业务部',
              staff: '王盼盼',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 0
            }, {
              id: 2,
              branch: '新业务部',
              staff: '陈光明',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 1
            }, {
              id: 2,
              branch: '新业务部',
              staff: '张喜',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 3
            }, {
              id: 2,
              branch: '新业务部',
              staff: '严顺天',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 1
            }, {
              id: 9,
              branch: '新业务部',
              staff: '徐航',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 3
            },{
              id: 2,
              branch: '新业务部',
              staff: '苏承彬',
              work: '80',
              quality: '85',
              team: '75',
              normal: '80',
              study: '85',
              master: '80',
              attend: '85',
              sum: '80',
              level: 2
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      sizeChange(val){
        console.log(val)
        this.getTableData()
      },
      pageChange(val){
        console.log(val)
        this.getTableData()
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
    }
  }
</script>